<template>
  <div>
    <div v-if="checkBindAc" class="binded">
      <div class="binded-tt">手机号</div>
      <div class="binded-cont">
        已绑定&emsp;
        <span>{{bindedPhone}}</span>
      </div>
    </div>
    <div class="tab-swiper vux-center" v-if="checkBind">
      <group>
        <x-input type="text" v-model="phone" class="inputPhone" :show-clear="true" :placeholder="'请输入手机号'" required></x-input>
        <div class="getCode">
          <x-input placeholder="请输入验证码" class="weui-vcode inputPhone" v-model="code"></x-input>
          <x-button slot="right" class="getCodeBtn" v-if="sendAuthCode" :disabled="!phone" type="primary" mini @click.native="getCode">获取验证码</x-button>
          <x-button slot="right" class="getCodeBtn" v-if="!sendAuthCode" :disabled="true" type="primary">{{auth_time}}秒后重新发送</x-button>
        </div>
        <x-button type="primary" class="submit" :disabled="!phone||!code" @click.native="submit">提交</x-button>
      </group>
    </div>
  </div>

</template>
<script>
  import {
    Group,
    XInput,
    XButton
  } from "vux";

  import {
    getPhoneBind_Axios,
    bindPhone_Axios,
    getPhoneCode_Axios
  } from "./axios/api";
  export default {
    components: {
      Group,
      XInput,
      XButton
    },
    data() {
      return {
        phone: '',
        code: '',
        sendAuthCode: true,
        auth_time: 60,
        checkBind: false,
        checkBindAc: false,
        bindedPhone: '',
        userId: sessionStorage.getItem('id'),
      };
    },

    methods: {
      changeBind() {
        this.phone = '';
        this.code = '';
          console.log('userId', userId);
          let userId = this.userId
          getPhoneBind_Axios(userId).then(response => {
            console.log('response', response);
            if (response.data.status == 0) {
              this.checkBindAc = true;
              this.checkBind = false;
              this.bindedPhone = response.data.data;
            } else {
              this.checkBindAc = false;
              this.checkBind = true;
            }
          })
      },
      getCode() {
        this.$http
          .post('http://122.152.216.183:8092/students/' + this.userId + '/phone', {
            phone: this.phone
          }, {
            emulateJSON: true
          })
          .then(response => {
            if (response.body.status == 0) {
              this.$vux.toast.show({
                text: "发送成功",
                width: '15rem',
                time: 700
              })
              this.sendAuthCode = false;
              this.auth_time = 60;
              var auth_timetimer = setInterval(() => {
                this.auth_time--;
                if (this.auth_time <= 0) {
                  this.sendAuthCode = true;
                  clearInterval(auth_timetimer);
                }
              }, 1000);
            } else {
              this.$vux.toast.show({
                text: "手机号格式不正确",
                width: '15rem',
                type: "warn",
                time: 900,
              })
            }
          })
      },
      submit() {
        this.$http
          .post('http://122.152.216.183:8092/students/' + this.userId + '/verifyphone', {
            phone: this.phone,
            phoneCode: this.code,
          }, {
            emulateJSON: true
          })
          .then(response => {
            console.log('response', response);
            this.$vux.toast.show({
              text: response.body.msg,
              width: '15rem'
            })
            this.$router.go(-1);
          })
      }
    },
    mounted() {
      this.changeBind()
    },
  };

</script>

<style lang="less" scoped>
  @import "~vux/src/styles/1px.less";
  @import "~vux/src/styles/center.less";
  .binded {
    margin: 2rem;
    border-radius: 2rem;
    font-size: 1.4rem;
    text-align: left;
    font-weight: bold;
    color: #5f2500;
    background: #fbf3d0;
  }

  .binded-cont {
    padding: 2rem;
    padding-top: 0;
  }

  .binded-tt {
    padding: 2rem;
  }

  .tab-swiper {
    background-color: #fff;
    height: 200px;
  }

  .inputPhone {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 1rem 2rem;
  }

  .getCode {
    display: flex;
    .getCodeBtn {
      width: 14rem;
      height: 5rem;
      padding: 0;
      font-size: 1rem;
      margin: 1rem 2rem 1rem 0;
    }
  }

  .submit {
    width: 90% !important;
    margin: 5% 2rem;

  }

</style>
